import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:nyh_motorcade_app/styles/colors.dart';
import 'package:nyh_motorcade_app/utils/format_utils.dart';
import 'package:nyh_motorcade_app/widgets/multi_state/multi_state_widget.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'report_forms_controller.dart';

class ReportFormsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Get.put(ReportFormsController());
    return AnnotatedRegion(
      value: SystemUiOverlayStyle.dark,
      child: Scaffold(
        backgroundColor: Colours.color_background,
        body: SafeArea(
          child: GetBuilder<ReportFormsController>(
            builder: (controller) {
              return MultiStateWidget(
                child: SmartRefresher(
                  controller: controller.refreshController,
                  onRefresh: controller.onRefresh,
                  child: CustomScrollView(
                    slivers: [
                      buildSynthesizeWidget(context, controller),
                      buildOilingStatisticsWidget(context, controller),
                      buildOilPriceTrendWidget(context, controller),
                    ],
                  ),
                ),
                state: controller.multiState,
                onRetry: () {
                  controller.onRetry();
                },
              );
            },
          ),
        ),
      ),
    );
  }

  Widget buildSynthesizeWidget(BuildContext context, ReportFormsController controller) {
    return SliverToBoxAdapter(
      child: Container(
        margin: EdgeInsets.only(left: 16.w, top: 12.w, right: 16.w),
        decoration: BoxDecoration(
          color: Colours.color_white,
          borderRadius: BorderRadius.circular(10.w),
          boxShadow: [
            BoxShadow(
              color: Colours.color_0f112e_95,
              offset: Offset(0.0, 2.w),
              blurRadius: 5.w,
            ),
          ],
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 12.w, horizontal: 16.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Material(
                color: Colours.color_transparent,
                child: InkWell(
                  onTap: () {
                    controller.changeDate();
                  },
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        controller.date,
                        style: TextStyle(
                          color: Colours.color_text_theme,
                          fontSize: 18.sp,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(
                        width: 8.w,
                      ),
                      Image.asset("images/ic_triangle.png"),
                    ],
                  ),
                ),
              ),
              SizedBox(
                height: 10.w,
              ),
              Row(
                children: [
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "加油金额(元)",
                          style: TextStyle(
                            color: Colours.color_6f7082,
                            fontSize: 12.sp,
                          ),
                        ),
                        SizedBox(
                          height: 5.w,
                        ),
                        Text(
                          FormatUtils.formatMoney(controller.amount),
                          style: TextStyle(
                            color: Colours.color_text_theme,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 5.w,
                  ),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "加油量(升)",
                          style: TextStyle(
                            color: Colours.color_6f7082,
                            fontSize: 12.sp,
                          ),
                        ),
                        SizedBox(
                          height: 5.w,
                        ),
                        Text(
                          FormatUtils.formatMoney(controller.quantity),
                          style: TextStyle(
                            color: Colours.color_text_theme,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 5.w,
                  ),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "加油车次(辆)",
                          style: TextStyle(
                            color: Colours.color_6f7082,
                            fontSize: 12.sp,
                          ),
                        ),
                        SizedBox(
                          height: 5.w,
                        ),
                        Text(
                          controller.trainNumber.toString(),
                          style: TextStyle(
                            color: Colours.color_text_theme,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildOilingStatisticsWidget(BuildContext context, ReportFormsController controller) {
    return SliverToBoxAdapter(
      child: Container(
        margin: EdgeInsets.only(left: 16.w, top: 10.w, right: 16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "加油统计",
              style: TextStyle(
                color: Colours.color_text_theme,
                fontSize: 14.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 10.w,
            ),
            Container(
              height: 260.w,
              decoration: BoxDecoration(
                color: Colours.color_white,
                borderRadius: BorderRadius.circular(10.w),
                boxShadow: [
                  BoxShadow(
                    color: Colours.color_0f112e_95,
                    offset: Offset(0.0, 2.w),
                    blurRadius: 5.w,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildOilPriceTrendWidget(BuildContext context, ReportFormsController controller) {
    return SliverToBoxAdapter(
      child: Container(
        margin: EdgeInsets.only(left: 16.w, top: 10.w, right: 16.w, bottom: 12.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "油价走势",
              style: TextStyle(
                color: Colours.color_text_theme,
                fontSize: 14.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 10.w,
            ),
            Container(
              height: 260.w,
              decoration: BoxDecoration(
                color: Colours.color_white,
                borderRadius: BorderRadius.circular(10.w),
                boxShadow: [
                  BoxShadow(
                    color: Colours.color_0f112e_95,
                    offset: Offset(0.0, 2.w),
                    blurRadius: 5.w,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
